<template>
  <div class="progress_manage">
    <section class="operation container">
      <ul class="procedure-list">
        <li
          v-for="(value, key) in procedure_list"
          :key="key"
          :class="{
            'is-active': key === current_procedure.key
          }"
          @click="chooseModule(key, value)"
        >
          {{ value }}
        </li>
      </ul>
      <div class="tools-box">
        <div class="title">模块工具</div>
        <ul class="tool-list">
          <li v-for="(value, key, index) in tool_list" :key="key" :class="toolBgStyle[index]">
            <i :class="`iconfont icon-${key}`"></i>
            <span>{{ value }}</span>
          </li>
        </ul>
      </div>
    </section>
    <section class="module container">
      <transition name="component-fade" mode="out-in">
        <keep-alive>
          <component
            :is="current_procedure.key"
            :key="current_procedure.value"
            :title="current_procedure.value"
            :meter="''"
          />
        </keep-alive>
      </transition>
    </section>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Provide } from 'vue-property-decorator'
import { Getter } from 'vuex-class'
import { App } from '@/store/interface/app'
import { Dictionary } from 'vue-router/types/router'
import { procedure_list } from './settings/procedure'
import AAG from '../procedure_module/AAG/product_init.vue'
import AAL from '../procedure_module/AAL/product_final.vue'
import AAP from '../procedure_module/AAP/thrid_party_test.vue'
import AAU from '../procedure_module/AAU/return_record.vue'
import AAT from '../procedure_module/AAT/none_standard.vue'
import AAE from '../procedure_module/AAE/zero_flow.vue'
import AAO from '../procedure_module/AAO/flow_verify.vue'
import AAK from '../procedure_module/AAK/air_tightness.vue'
import AAN from '../procedure_module/AAN/into_storage.vue'
import AAA from '../procedure_module/AAA/computer.vue'
import AAH from '../procedure_module/AAH/signal_debug.vue'
import AAM from '../procedure_module/AAM/quality_test.vue'
@Component({
  components: {
    AAG,
    AAL,
    AAP,
    AAU,
    AAT,
    AAE,
    AAO,
    AAK,
    AAN,
    AAA,
    AAH,
    AAM
  }
})
class ProgressManage extends Vue {
  @Getter('sidebar') sidebar!: App['sidebar']
  @Provide('meter')
  meter: string = ''
  // procedure
  procedure_list = procedure_list
  current_procedure: Dictionary<string> = {
    key: 'AAG',
    value: '初装工序'
  }
  // toolbox
  tool_list: Dictionary<string> = {
    bind: '绑定',
    integral: '测试1',
    exchange: '测试2',
    message: '测试3',
    folder: '测试4',
    visible: '测试2',
    search: '测试3'
  }
  get toolBgStyle() {
    const arr = new Array(Object.keys(this.tool_list).length).fill('')
    const styles = ['blue', 'green', 'red', 'yellow']
    for (let i = 0; i < arr.length; i++) {
      arr[i] = 'is-' + styles[Math.round(Math.random() * 3)]
      if (i > 0) {
        while (arr[i - 1] === arr[i]) {
          arr[i] = 'is-' + styles[Math.round(Math.random() * 3)]
        }
      }
    }
    return arr
  }
  mounted() {
    // 进入工序管理页面，默认收起左侧导航栏
    if (this.sidebar.opened) this.$store.dispatch('app/toggleSideBar')
  }
  chooseModule(key: string | number, value: string) {
    this.current_procedure = { key: key.toString(), value }
  }
}
export default ProgressManage
</script>

<style lang="less" scoped>
@import '~@/styles/theme.less';
@import '~@/styles/layout.less';
.progress_manage {
  box-sizing: border-box;
  padding: 10px 20px;
  height: calc(100vh - 50px);
  #flex(row, flex-start, space-between);
  #color(background-color, --primary-bg-color);
  .container {
    box-sizing: border-box;
    height: 100%;
  }
  .operation {
    width: 300px;
    margin-right: 20px;
    #flex(column, center, flex-start);
    .procedure-list {
      box-sizing: border-box;
      padding: 10px;
      width: 100%;
      max-height: calc((100vh - 50px) * 0.5);
      overflow: auto;
      #color(background-color, --module-bg-color);
      li {
        box-sizing: border-box;
        padding: 15px 10px 15px 20px;
        position: relative;
        font-size: 14px;
        margin-bottom: 10px;
        text-align: left;
        transition: all 0.2s ease;
        transform-style: preserve-3d;
        cursor: pointer;
        #color(color, --primary-text-color);
        #shadow-color(0, 4px, 8px, 0, --primary-shadow-color);
      }
      li::after {
        content: '';
        display: block;
        width: 5px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px);
        transition: width 0.5s ease;
        #color(background-color, --primary-blue-color);
      }
      li:hover {
        color: #ffffff;
      }
      li:hover::after {
        width: 100%;
        #color(background-color, --heavier-blue-color);
      }
      .is-active {
        color: #ffffff;
      }
      .is-active::after {
        width: 100%;
        #color(background-color, --heavier-blue-color);
      }
    }
    .tools-box {
      box-sizing: border-box;
      padding: 10px;
      margin-top: 10px;
      width: 100%;
      flex: 1;
      overflow: auto;
      #color(background-color, --module-bg-color);
      .title {
        margin-bottom: 5px;
        text-align: left;
        font-size: 20px;
        font-weight: 900;
        #color(color, --primary-text-color);
      }
      .tool-list {
        flex-wrap: wrap;
        #flex(row, center, flex-start);
        li {
          box-sizing: border-box;
          padding: 5px;
          width: 22%;
          margin-right: 3%;
          margin-bottom: 10px;
          border-radius: 3px;
          color: #ffffff;
          opacity: 0.8;
          transition: all 0.2s ease;
          cursor: pointer;
          #flex(column, center, center);
          i {
            font-size: 20px;
          }
          span {
            font-size: 12px;
          }
        }
        li:nth-child(4n) {
          margin-right: 0;
        }
        li:hover {
          opacity: 0.6;
        }
        .is-blue {
          #color(background-color, --primary-blue-color);
        }
        .is-green {
          #color(background-color, --primary-green-color);
        }
        .is-red {
          #color(background-color, --primary-red-color);
        }
        .is-yellow {
          #color(background-color, --primary-yellow-color);
        }
      }
    }
    ::-webkit-scrollbar {
      width: 0;
    }
  }
  .module {
    flex: 1;
    overflow: auto;
    #color(background-color, --module-bg-color);
  }
}
.component-fade-enter-active,
.component-fade-leave-active {
  transition: all 0.5s ease;
}
.component-fade-leave-active {
  transition-delay: 0.2s;
}
.component-fade-enter {
  transform: translateX(-100%);
}
.component-fade-leave-to {
  opacity: 0;
  transform: translateX(100%);
}
</style>
